<template>
    
  <div class="index-wrapper">
    <div class="index-top bg-white px-3 d-flex flex-column border-bottom">
      <div class="top-button d-flex align-items-center">
        <Button
          type="primary"
          icon="ios-search"
          class="mr-2"
          @click="upload"
          >上传</Button
        >
        <Button icon="ios-search" class="mr-2" @click="createDir"
          >新建文件夹</Button
        >
        <Button icon="ios-search" class="mr-2" v-if="checkedCount">下载</Button>
        <Button icon="ios-search" class="mr-2" v-if="checkedCount == 1"
          >分享</Button
        >
        <Button
          icon="ios-search"
          @click="rename(false)"
          class="mr-2"
          v-if="checkedCount == 1"
          >重命名</Button
        >
        <Button icon="ios-search" class="mr-2" v-if="checkedCount">删除</Button>
        <Input
          search
          enter-button
          class="index-search ml-auto"
          placeholder="请输入关键词"
        />
      </div>
      <div class="top-select d-flex align-items-center">
        <Checkbox
          :value="checkAllStatus"
          class="small"
          @on-change="checkAllChange"
          ><span class="ml-2">全选</span></Checkbox
        >
      </div>
    </div>
    <div class="index-list bg-white">
      <media-list
        v-for="(item, index) in list"
        :item="item"
        :index="index"
        :key="index"
        @on-event="handleEvent"
      ></media-list>
    </div>
    <div class="index-page bg-white px-3 d-flex align-items-center">
      <Page :total="100" show-sizer />
    </div>
    <!-- 图片预览 -->
    <div class="images d-none" v-viewer>
      <img v-for="(src, index) in images" :src="src" :key="index" />
    </div>
    <!-- 上传图片的模态框 -->
    <Modal v-model="uploadModalStatus" fullscreen footer-hide @on-cancel = 'initData' title="上传文件">
      <Upload
        multiple
        type="drag"
        :headers = "{token}"
        action="http://pcceshi10.dishait.cn/api/upload?file_id=0"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>单机或者拖动文件上传</p>
        </div>
      </Upload>
    </Modal>
  </div>
</template>

<script>
import mediaList from "../components/media-list";
import { getFileList, createFolder } from "../api/index";
export default {
  name: "",
  data() {
    return {
      token:'',
      uploadModalStatus: false,
      value: "",
      list: [
        {
          type: "dir",
          name: "我的笔记",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "dir",
          name: "我的备份",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "dir",
          name: "相册管理",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "dir",
          name: "我的资源",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "image",
          name: "风景.jpg",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg",
        },
        {
          type: "image",
          name: "海报.jpg",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg",
        },
        {
          type: "video",
          name: "uniapp实战社区交友教程.mp4",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
        },
        {
          type: "video",
          name: "uniapp实战商城教程.mp4",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
        },
        {
          type: "video",
          name: "uniapp实战仿微信教程.mp4",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
        },
        {
          type: "image",
          name: "摄影.jpg",
          create_time: "2019-12-15 08:00",
          checked: false,
          url:
            "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg",
        },
        {
          type: "text",
          name: "记事本.txt",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
        {
          type: "none",
          name: "压缩包.rar",
          create_time: "2019-12-15 08:00",
          checked: false,
        },
      ],
    };
  },
  components: {
    mediaList,
  },
  computed: {
    checkList() {
      return this.list.filter((item) => item.checked == true);
    },
    checkAllStatus() {
      return this.list.length == this.checkList.length;
    },
    checkedCount() {
      return this.checkList.length;
    },
    images() {
      let urls = [];
      this.list.forEach((item, index) => {
        if (item.type === "image") {
          urls.push(item.url);
        }
      });
      return urls;
    },
    checkList() {
      return this.list.filter((item) => item.checked);
    },
    checkedAllStatus() {
      return this.checkList.length === this.list.length;
    },
    checkedCount() {
      return this.checkList.length;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    // 文件上传的请求头
    upload(){
      this.uploadModalStatus = true;
      this.token = localStorage.getItem('token')
    },
    // 将请求到的数据转换为我们要用的格式
    formatList(list) {
      const listData = list.map((item, index) => {
        item.type =
          item.ext === ""
            ? "dir"
            : item.ext.substring(0, item.ext.indexOf("/"));
        item.checked = false;
        return item;
      });
      return listData;
    },
    // 初始化文件数据
    initData() {
      getFileList().then((res) => {
        console.log(res);
        if (res.data.msg == "ok") {
          this.list = this.formatList(res.data.data);
        }
      });
    },
    // 创建文件夹
    createDir() {
      let value = "";
      this.$Modal.confirm({
        title: "新建文件夹",
        render: (h) => {
          return h("Input", {
            props: {
              value: this.value,
              autofocus: true,
              placeholder: "请输入文件夹名称...",
            },
            on: {
              input: (val) => {
                value = val;
              },
            },
          });
        },
        onOk: () => {
          createFolder(0, value)
            .then((res) => {
              if (res.data.msg == "ok") {
                this.initData();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    },
    //   删除
    handleEvent(e) {
      // console.log(e);
      switch (e.type) {
        case "delete":
          this.list.splice(e.index, 1);
          this.$Message.success("删除成功");
          break;
        case "checked":
          this.list[e.index].checked = e.value;
          break;
        case "rename":
          this.list[e.index].name = e.value;
          break;
        case "image":
          const viewer = this.$el.querySelector(".images").$viewer;
          let index = this.images.findIndex((url) => url === e.url);
          viewer.view(index);
          viewer.show();
        default:
          break;
      }
    },
    // 全选
    checkAllChange(e) {
      console.log(e);
      this.list.map((item, index) => {
        item.checked = e;
      });
    },
    //重命名
    rename(index = false) {
      let item = index !== false ? this.list[index] : this.checkList[0];
      let value = item.name;
      this.$Modal.confirm({
        render: (h) => {
          return h("Input", {
            props: {
              value: value,
              autofocus: true,
              placeholder: "请填写新名称...",
            },
            on: {
              input: (val) => {
                value = val;
              },
            },
          });
        },
        onOk: () => {
          item.name = value;
        },
      });
    },
  },
};
</script>

<style scoped>
.index-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
}
.index-search {
  width: 200px;
}
.top-button {
  height: 50px;
}
.index-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  bottom: 60px;
  overflow-y: auto;
}
.index-page {
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
